<template>
  <div class="content" id="allmap">

    <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="">
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

      <!-- 描边 -->
      <bm-boundary name="呼伦贝尔市鄂温克族自治旗" :strokeWeight="2" strokeColor="blue" fillOpacity="0" />

      <!--点-->
      <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP" />
    </baidu-map>
  </div>
</template>

<script>
  import '../../assets/js/BMapGLLib.js'
  import BaiduMap from 'BaiduMap'

  export default {
    name: "demo",
    data: () => ({
      map: {
        center: { lng: 119.82, lat: 49.15 },
        zoom: 12,
        show: true,
        dragging: true
      },
    }),
    mounted() {
      var map = new BaiduMap.Map('allmap') // 创建地图实例
      var point = new BaiduMap.Point(119.741161,49.024210) // 创建中心点坐标
      var marker = new BaiduMap.Marker(point) // 创建标注
      map.centerAndZoom(point, 11) // 初始化地图，设置中心点坐标和地图级别
      map.addOverlay(marker) // 将标注添加到地图中
    },
    methods: {
      handler({ BMap, map }) {

        var bmap = new BMapGL.Map("allmap"); 

        // 鼠标缩放
        map.enableScrollWheelZoom(true);

        map.centerAndZoom(new BMap.Point(119.741161,49.024210), 11);

        var path = [
          { lng: 119.741161, lat: 49.024210 },
          { lng: 119.740230, lat: 49.024068 },
          { lng: 119.740230, lat: 49.024068 },
          { lng: 119.739206, lat: 49.023761 },
          { lng: 119.739206, lat: 49.023761 },
          { lng: 119.740292, lat: 49.023435 },
          { lng: 119.740292, lat: 49.023435 },
          { lng: 119.739982, lat: 49.022313 },
          { lng: 119.740354, lat: 49.022435 },
          { lng: 119.740354, lat: 49.022435 },
          { lng: 119.737220, lat: 49.022741 }
        ];

        var point = []

        for (var i = 0; i < path.length; i++) {
          point.push(new BMap.Point(path[i].lng, path[i].lat));
        }
        var pl = new BMap.Polyline(point);
        setTimeout(() => {
          start()
        }, 3000);


        function start() {
          trackAni = new BMapGLLib.TrackAnimation(map, pl, {
            overallView: true,
            tilt: 30,
            duration: 20000,
            delay: 300
          });
          trackAni.start();
        }


        // for (let i = 0; i < path.length; i += 2) {
        //   var walking = new BMap.WalkingRoute(map, {
        //     renderOptions: {
        //       map: map,
        //       autoViewport: true
        //     },
        //     onPolylinesSet: function (routes) {
        //       // let searchRoute = routes[0].getPolyline();//导航路线
        //       // map.removeOverlay(searchRoute);//移除查询出来 的路线
        //     },
        //     onMarkersSet: function (routes) {
        //       // map.removeOverlay(routes[0].marker); //删除起点
        //       // map.removeOverlay(routes[routes.length - 1].marker); //删除终点
        //     }
        //   });
        //   let _this = this;
        //   var start = new BMap.Point(path[i][0], path[i][1]);
        //   var end = new BMap.Point(path[i + 1][0], path[i + 1][1]);
        //   walking.search(start, end);
        //   walking.setSearchCompleteCallback(function () {
        //     var plan = walking.getResults().getPlan(0);
        //     for (let j = 0; j < plan.getNumRoutes(); j++) {
        //       var pts = plan.getRoute(j).getPath();
        //       var polyline = new BMap.Polyline(pts, { strokeColor: "#ff0000", strokeWeight: 2, strokeOpacity: 1 });//重新划路线
        //       // map.addOverlay(polyline);
        //     }
        //   })
        // }

        map.addEventListener('click', function (e) { // 点击地点获取经纬度
          console.log(e.point.lng, e.point.lat)
        })
      }
    },
    mounted() {

    },
  }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 100%;
  }

  span {
    display: none;
  }

  .content {
    width: 100%;
    height: 100%;
  }
</style>